<template>
  <div class="study-container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-content">
        <div class="logo-section">
          <img src="https://py-steven.com/blog/static/image/logo.png" alt="logo" class="logo" />
          <span class="site-title">学习打卡</span>
        </div>
        <nav class="nav-menu">
          <router-link to="/home" class="nav-item">返回首页</router-link>
        </nav>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 统计概览 -->
      <div class="statistics-section">
        <div class="stat-card">
          <div class="stat-icon">📊</div>
          <div class="stat-info">
            <div class="stat-value">{{ statistics.total_days }}</div>
            <div class="stat-label">总打卡天数</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">🔥</div>
          <div class="stat-info">
            <div class="stat-value">{{ statistics.continuous_days }}</div>
            <div class="stat-label">连续打卡天数</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">⏱️</div>
          <div class="stat-info">
            <div class="stat-value">{{ formatDuration(statistics.total_duration) }}</div>
            <div class="stat-label">总学习时长</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">🏆</div>
          <div class="stat-info">
            <div class="stat-value">{{ statistics.max_continuous_days }}</div>
            <div class="stat-label">最长连续天数</div>
          </div>
        </div>
      </div>

      <!-- 科目列表和打卡表单 -->
      <div class="content-wrapper">
        <!-- 左侧：科目列表 -->
        <div class="subjects-section">
          <div class="section-header">
            <h2>学习科目</h2>
            <button class="btn-primary" @click="showSubjectModal = true">+ 添加科目</button>
          </div>

          <div v-if="loadingSubjects" class="loading-box">加载中...</div>
          <div v-else-if="subjects.length === 0" class="empty-box">
            暂无科目，请先添加学习科目
          </div>
          <div v-else class="subjects-list">
            <div
              v-for="subject in subjects"
              :key="subject.id"
              class="subject-card"
              :class="{ active: selectedSubject?.id === subject.id }"
              @click="selectSubject(subject)"
            >
              <div class="subject-header">
                <span class="subject-icon" :style="{ backgroundColor: subject.color }">
                  {{ subject.icon || '📚' }}
                </span>
                <div class="subject-info">
                  <div class="subject-name">{{ subject.name }}</div>
                  <div class="subject-desc">{{ subject.description || '暂无描述' }}</div>
                </div>
              </div>
              <div class="subject-footer">
                <span v-if="subject.target_days > 0">目标: {{ subject.target_days }}天</span>
                <div class="subject-actions">
                  <button class="btn-icon" @click.stop="editSubject(subject)">✏️</button>
                  <button class="btn-icon" @click.stop="deleteSubjectConfirm(subject.id)">🗑️</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧：打卡表单 -->
        <div class="checkin-section">
          <div class="section-header">
            <h2>今日打卡</h2>
          </div>

          <div v-if="!selectedSubject" class="empty-box">
            请先选择一个学习科目
          </div>
          <div v-else class="checkin-form">
            <div class="form-group">
              <label>科目</label>
              <input type="text" :value="selectedSubject.name" disabled />
            </div>

            <!-- 学习计时器 -->
            <div class="timer-section">
              <div class="timer-display">
                <div class="timer-icon">⏱️</div>
                <div class="timer-time">{{ formatTimer(currentDuration) }}</div>
              </div>

              <div class="timer-controls">
                <button
                  v-if="!isStudying"
                  type="button"
                  class="btn-start"
                  @click="startStudy"
                >
                  开始学习
                </button>
                <template v-else>
                  <button
                    v-if="!isPaused"
                    type="button"
                    class="btn-pause"
                    @click="pauseStudy"
                  >
                    暂停学习
                  </button>
                  <button
                    v-else
                    type="button"
                    class="btn-continue"
                    @click="continueStudy"
                  >
                    继续学习
                  </button>
                  <button
                    type="button"
                    class="btn-stop"
                    @click="stopStudy"
                  >
                    结束学习
                  </button>
                </template>
              </div>

              <div v-if="studyStartTime" class="timer-info">
                <div>开始时间: {{ formatTime(studyStartTime) }}</div>
                <div v-if="isPaused" class="pause-status">⏸️ 已暂停</div>
              </div>
            </div>

            <!-- 只有在结束学习后才显示完成打卡表单 -->
            <div v-if="studyCompleted" class="complete-form">
              <div class="form-group">
                <label>学习时长</label>
                <div class="duration-display">
                  {{ formatDuration(checkInForm.duration_minutes) }}
                </div>
              </div>

              <div class="form-group">
                <label>学习心情</label>
                <div class="mood-selector">
                  <button
                    type="button"
                    v-for="mood in moods"
                    :key="mood.value"
                    class="mood-btn"
                    :class="{ active: checkInForm.mood === mood.value }"
                    @click="checkInForm.mood = mood.value"
                  >
                    {{ mood.emoji }} {{ mood.label }}
                  </button>
                </div>
              </div>

              <div class="form-group">
                <label>学习笔记</label>
                <textarea
                  v-model="checkInForm.content"
                  rows="6"
                  placeholder="记录今天的学习内容和收获..."
                ></textarea>
              </div>

              <button type="button" class="btn-submit" @click="handleCheckIn" :disabled="submitting">
                {{ submitting ? '打卡中...' : '完成打卡' }}
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 打卡记录列表 -->
      <div class="records-section">
        <div class="section-header">
          <h2>打卡记录</h2>
          <div class="filter-group">
            <select v-model="filterSubjectId" @change="fetchCheckIns">
              <option :value="null">全部科目</option>
              <option v-for="subject in subjects" :key="subject.id" :value="subject.id">
                {{ subject.name }}
              </option>
            </select>
          </div>
        </div>

        <div v-if="loadingCheckIns" class="loading-box">加载中...</div>
        <div v-else-if="checkIns.length === 0" class="empty-box">
          暂无打卡记录
        </div>
        <div v-else class="records-list">
          <div v-for="record in checkIns" :key="record.id" class="record-card">
            <div class="record-header">
              <div class="record-date">{{ formatDateTime(record.check_in_date) }}</div>
              <div class="record-subject">{{ getSubjectName(record.subject_id) }}</div>
              <div class="record-mood">{{ getMoodEmoji(record.mood) }}</div>
            </div>
            <div class="record-content">
              <div class="record-duration" v-if="record.duration_minutes">
                ⏱️ {{ record.duration_minutes }} 分钟
              </div>
              <div class="record-note" v-if="record.content">{{ record.content }}</div>
            </div>
            <div class="record-actions">
              <button class="btn-text" @click="editCheckIn(record)">编辑</button>
              <button class="btn-text danger" @click="deleteCheckInConfirm(record.id)">删除</button>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <div v-if="checkIns.length > 0" class="pagination">
          <button :disabled="pagination.page === 1" @click="changePage(pagination.page - 1)">上一页</button>
          <span>第 {{ pagination.page }} / {{ pagination.total_pages }} 页</span>
          <button :disabled="pagination.page >= pagination.total_pages" @click="changePage(pagination.page + 1)">
            下一页
          </button>
        </div>
      </div>
    </main>

    <!-- 添加/编辑科目弹窗 -->
    <div v-if="showSubjectModal" class="modal-overlay" @click="closeSubjectModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>{{ editingSubject ? '编辑科目' : '添加科目' }}</h3>
          <button class="btn-close" @click="closeSubjectModal">×</button>
        </div>
        <form class="modal-form" @submit.prevent="submitSubject">
          <div class="form-group">
            <label>科目名称 *</label>
            <input type="text" v-model="subjectForm.name" required placeholder="例如：Python学习" />
          </div>
          <div class="form-group">
            <label>科目描述</label>
            <textarea v-model="subjectForm.description" rows="3" placeholder="简单描述学习内容和目标"></textarea>
          </div>
          <div class="form-group">
            <label>科目颜色</label>
            <input type="color" v-model="subjectForm.color" />
          </div>
          <div class="form-group">
            <label>目标打卡天数</label>
            <input type="number" v-model.number="subjectForm.target_days" min="0" placeholder="0表示无限制" />
          </div>
          <div class="modal-actions">
            <button type="button" class="btn-secondary" @click="closeSubjectModal">取消</button>
            <button type="submit" class="btn-primary">{{ editingSubject ? '保存' : '添加' }}</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import {
  getSubjects,
  createSubject,
  updateSubject,
  deleteSubject,
  checkIn,
  updateCheckIn,
  deleteCheckIn,
  getCheckIns,
  getStatisticsSummary
} from '@/api/study'
import message from '@/utils/message'

const router = useRouter()

// 科目相关
const subjects = ref([])
const loadingSubjects = ref(false)
const selectedSubject = ref(null)
const showSubjectModal = ref(false)
const editingSubject = ref(null)

// 科目表单
const subjectForm = reactive({
  name: '',
  description: '',
  color: '#1890ff',
  target_days: 0
})

// 学习计时相关
const isStudying = ref(false)
const isPaused = ref(false)
const studyStartTime = ref(null)
const studyEndTime = ref(null)
const pauseStartTime = ref(null)
const totalPausedDuration = ref(0) // 总暂停时长（秒）
const currentDuration = ref(0) // 当前学习时长（秒）
const studyCompleted = ref(false)
let timerInterval = null

// 打卡表单
const checkInForm = reactive({
  subject_id: null,
  check_in_date: '', // 将在onMounted中初始化
  duration_minutes: null,
  content: '',
  mood: null
})

// 心情选项
const moods = [
  { value: 1, label: '很差', emoji: '😞' },
  { value: 2, label: '一般', emoji: '😐' },
  { value: 3, label: '不错', emoji: '🙂' },
  { value: 4, label: '很好', emoji: '😊' },
  { value: 5, label: '超棒', emoji: '🤩' }
]

// 打卡记录相关
const checkIns = ref([])
const loadingCheckIns = ref(false)
const filterSubjectId = ref(null)
const pagination = reactive({
  page: 1,
  page_size: 10,
  total: 0,
  total_pages: 0
})

// 统计数据
const statistics = ref({
  total_days: 0,
  total_duration: 0,
  continuous_days: 0,
  max_continuous_days: 0,
  week_days: 0,
  month_days: 0
})

const submitting = ref(false)

// 计算属性：获取当前本地日期
const currentLocalDate = computed(() => {
  const date = new Date()
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
})

// 获取本地日期（YYYY-MM-DD格式）
const getLocalDate = () => {
  return currentLocalDate.value
}

// 格式化时长（分钟）
const formatDuration = (minutes) => {
  if (!minutes) return '0分钟'
  const hours = Math.floor(minutes / 60)
  const mins = minutes % 60
  return hours > 0 ? `${hours}小时${mins}分钟` : `${mins}分钟`
}

// 格式化计时器显示（秒）
const formatTimer = (seconds) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60

  const pad = (num) => String(num).padStart(2, '0')

  if (hours > 0) {
    return `${pad(hours)}:${pad(minutes)}:${pad(secs)}`
  }
  return `${pad(minutes)}:${pad(secs)}`
}

// 格式化时间显示
const formatTime = (date) => {
  if (!date) return ''
  const d = new Date(date)
  const hours = String(d.getHours()).padStart(2, '0')
  const minutes = String(d.getMinutes()).padStart(2, '0')
  const seconds = String(d.getSeconds()).padStart(2, '0')
  return `${hours}:${minutes}:${seconds}`
}

// 格式化日期显示（仅年月日）
const formatDateTime = (date) => {
  if (!date) return ''
  const d = new Date(date)
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 开始学习
const startStudy = () => {
  if (!selectedSubject.value) {
    message.error('请先选择科目')
    return
  }

  isStudying.value = true
  isPaused.value = false
  studyStartTime.value = new Date()
  studyCompleted.value = false
  currentDuration.value = 0
  totalPausedDuration.value = 0
  pauseStartTime.value = null

  // 开始计时
  timerInterval = setInterval(() => {
    if (!isPaused.value) {
      currentDuration.value++
    }
  }, 1000)

  message.success('开始学习，加油！')
}

// 暂停学习
const pauseStudy = () => {
  if (!isStudying.value || isPaused.value) return

  isPaused.value = true
  pauseStartTime.value = new Date()

  message.info('学习已暂停')
}

// 继续学习
const continueStudy = () => {
  if (!isStudying.value || !isPaused.value) return

  // 计算暂停时长
  if (pauseStartTime.value) {
    const pauseDuration = Math.floor((new Date() - pauseStartTime.value) / 1000)
    totalPausedDuration.value += pauseDuration
  }

  isPaused.value = false
  pauseStartTime.value = null

  message.success('继续学习，加油！')
}

// 结束学习
const stopStudy = () => {
  if (!isStudying.value) return

  // 如果在暂停状态下结束，先计算暂停时长
  if (isPaused.value && pauseStartTime.value) {
    const pauseDuration = Math.floor((new Date() - pauseStartTime.value) / 1000)
    totalPausedDuration.value += pauseDuration
  }

  isStudying.value = false
  isPaused.value = false
  studyEndTime.value = new Date()

  // 停止计时
  if (timerInterval) {
    clearInterval(timerInterval)
    timerInterval = null
  }

  // 计算学习时长（分钟，向上取整）
  const durationMinutes = Math.ceil(currentDuration.value / 60)
  checkInForm.duration_minutes = durationMinutes

  studyCompleted.value = true

  // 显示统计信息
  const actualStudyTime = Math.floor(currentDuration.value / 60)
  const pausedTime = Math.floor(totalPausedDuration.value / 60)
  let messageText = `学习结束！本次学习 ${formatDuration(durationMinutes)}`
  if (pausedTime > 0) {
    messageText += `（实际学习时间：${formatDuration(actualStudyTime)}，暂停时间：${formatDuration(pausedTime)}）`
  }
  message.success(messageText)
}

// 获取科目列表
const fetchSubjects = async () => {
  try {
    loadingSubjects.value = true
    const response = await getSubjects()
    if (response.code === 200) {
      subjects.value = response.data
    }
  } catch (error) {
    message.error(error.message || '获取科目列表失败')
  } finally {
    loadingSubjects.value = false
  }
}

// 选择科目
const selectSubject = (subject) => {
  selectedSubject.value = subject
  checkInForm.subject_id = subject.id
}

// 编辑科目
const editSubject = (subject) => {
  editingSubject.value = subject
  Object.assign(subjectForm, {
    name: subject.name,
    description: subject.description || '',
    color: subject.color || '#1890ff',
    target_days: subject.target_days || 0
  })
  showSubjectModal.value = true
}

// 关闭科目弹窗
const closeSubjectModal = () => {
  showSubjectModal.value = false
  editingSubject.value = null
  Object.assign(subjectForm, {
    name: '',
    description: '',
    color: '#1890ff',
    target_days: 0
  })
}

// 提交科目表单
const submitSubject = async () => {
  try {
    const data = { ...subjectForm }
    if (editingSubject.value) {
      await updateSubject(editingSubject.value.id, data)
      message.success('科目更新成功')
    } else {
      await createSubject(data)
      message.success('科目创建成功')
    }
    closeSubjectModal()
    fetchSubjects()
  } catch (error) {
    message.error(error.message || '操作失败')
  }
}

// 删除科目
const deleteSubjectConfirm = async (id) => {
  if (confirm('确定要删除这个科目吗？')) {
    try {
      await deleteSubject(id)
      message.success('科目删除成功')
      if (selectedSubject.value?.id === id) {
        selectedSubject.value = null
      }
      fetchSubjects()
    } catch (error) {
      message.error(error.message || '删除失败')
    }
  }
}

// 检查今天是否已经打卡
const checkTodayCheckIn = () => {
  const today = currentLocalDate.value
  return checkIns.value.some(record => {
    const recordDate = formatDateTime(record.check_in_date)
    return recordDate === today && record.subject_id === selectedSubject.value?.id
  })
}

// 打卡
const handleCheckIn = async () => {
  if (!selectedSubject.value) {
    message.error('请选择科目')
    return
  }

  if (!checkInForm.duration_minutes || checkInForm.duration_minutes <= 0) {
    message.error('请先完成学习计时')
    return
  }

  // 检查今天是否已经打卡
  if (checkTodayCheckIn()) {
    const today = currentLocalDate.value
    message.error(`今天（${today}）已经打过卡了，请不要重复打卡！`)
    return
  }

  try {
    submitting.value = true
    const data = {
      subject_id: checkInForm.subject_id,
      check_in_date: checkInForm.check_in_date,
      duration_minutes: checkInForm.duration_minutes,
      content: checkInForm.content || null,
      mood: checkInForm.mood || null
    }
    await checkIn(data)
    message.success('打卡成功！')

    // 重置表单和计时器
    checkInForm.content = ''
    checkInForm.duration_minutes = null
    checkInForm.mood = null
    checkInForm.check_in_date = currentLocalDate.value

    // 重置计时器状态
    studyCompleted.value = false
    studyStartTime.value = null
    studyEndTime.value = null
    currentDuration.value = 0
    isPaused.value = false
    pauseStartTime.value = null
    totalPausedDuration.value = 0

    // 刷新数据
    fetchCheckIns()
    fetchStatistics()
  } catch (error) {
    // 检查是否为重复打卡错误
    if (error.message && error.message.includes('Duplicate entry') && error.message.includes('uq_user_subject_date')) {
      const localDate = currentLocalDate.value
      message.error(`今天（${localDate}）已经打过卡了，请不要重复打卡！`)
    } else {
      message.error(error.message || '打卡失败')
    }
  } finally {
    submitting.value = false
  }
}

// 获取打卡记录
const fetchCheckIns = async () => {
  try {
    loadingCheckIns.value = true
    const params = {
      page: pagination.page,
      page_size: pagination.page_size
    }
    if (filterSubjectId.value) {
      params.subject_id = filterSubjectId.value
    }

    const response = await getCheckIns(params)
    if (response.code === 200) {
      checkIns.value = response.data.items || []
      pagination.total = response.data.total
      pagination.total_pages = response.data.total_pages
    }
  } catch (error) {
    message.error(error.message || '获取打卡记录失败')
  } finally {
    loadingCheckIns.value = false
  }
}

// 编辑打卡记录
const editCheckIn = (record) => {
  // 这里可以实现编辑功能，暂时简化
  message.info('编辑功能开发中')
}

// 删除打卡记录
const deleteCheckInConfirm = async (id) => {
  if (confirm('确定要删除这条打卡记录吗？')) {
    try {
      await deleteCheckIn(id)
      message.success('删除成功')
      fetchCheckIns()
      fetchStatistics()
    } catch (error) {
      message.error(error.message || '删除失败')
    }
  }
}

// 翻页
const changePage = (page) => {
  pagination.page = page
  fetchCheckIns()
}

// 获取统计数据
const fetchStatistics = async () => {
  try {
    const response = await getStatisticsSummary()
    if (response.code === 200) {
      statistics.value = response.data
    }
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

// 获取科目名称
const getSubjectName = (subjectId) => {
  const subject = subjects.value.find(s => s.id === subjectId)
  return subject ? subject.name : '未知科目'
}

// 获取心情表情
const getMoodEmoji = (mood) => {
  const moodItem = moods.find(m => m.value === mood)
  return moodItem ? moodItem.emoji : ''
}

// 组件挂载
onMounted(() => {
  // 初始化表单日期
  checkInForm.check_in_date = currentLocalDate.value

  fetchSubjects()
  fetchCheckIns()
  fetchStatistics()
})

// 组件卸载时清理计时器
onUnmounted(() => {
  if (timerInterval) {
    clearInterval(timerInterval)
    timerInterval = null
  }
})
</script>

<style scoped>
.study-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 顶部导航栏 */
.header {
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.site-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.nav-menu {
  display: flex;
  gap: 20px;
}

.nav-item {
  color: #333;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.nav-item:hover {
  color: #1890ff;
}

/* 主内容 */
.main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 30px 20px;
}

/* 统计概览 */
.statistics-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.stat-icon {
  font-size: 36px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 13px;
  color: #999;
}

/* 内容区域 */
.content-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

/* 科目列表 */
.subjects-section,
.checkin-section,
.records-section {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.subjects-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.subject-card {
  border: 2px solid #e8e8e8;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.subject-card:hover {
  border-color: #1890ff;
}

.subject-card.active {
  border-color: #1890ff;
  background: #f0f7ff;
}

.subject-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.subject-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.subject-info {
  flex: 1;
}

.subject-name {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.subject-desc {
  font-size: 12px;
  color: #999;
}

.subject-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.subject-actions {
  display: flex;
  gap: 8px;
}

/* 打卡表单 */
.checkin-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 学习计时器 */
.timer-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  color: white;
}

.timer-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.timer-icon {
  font-size: 48px;
}

.timer-time {
  font-size: 48px;
  font-weight: 600;
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
}

.timer-controls {
  margin-bottom: 16px;
}

.timer-info {
  font-size: 14px;
  opacity: 0.9;
}

.pause-status {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #faad14;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.btn-start,
.btn-pause,
.btn-continue,
.btn-stop {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-start {
  background: white;
  color: #667eea;
}

.btn-start:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.btn-stop {
  background: #ff4d4f;
  color: white;
}

.btn-stop:hover {
  background: #ff7875;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.4);
}

.btn-pause {
  background: #faad14;
  color: white;
  margin-right: 12px;
}

.btn-pause:hover {
  background: #ffc53d;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(250, 173, 20, 0.4);
}

.btn-continue {
  background: #52c41a;
  color: white;
  margin-right: 12px;
}

.btn-continue:hover {
  background: #73d13d;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(82, 196, 26, 0.4);
}

/* 完成表单 */
.complete-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 20px;
  border-top: 2px dashed #e8e8e8;
}

.duration-display {
  font-size: 24px;
  font-weight: 600;
  color: #52c41a;
  padding: 12px;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 4px;
  text-align: center;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.form-group input,
.form-group textarea,
.form-group select {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  outline: none;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #1890ff;
}

.form-group input:disabled {
  background: #f5f5f5;
  cursor: not-allowed;
}

.mood-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mood-btn {
  flex: 1;
  min-width: 80px;
  padding: 8px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.3s;
}

.mood-btn:hover {
  border-color: #1890ff;
}

.mood-btn.active {
  border-color: #1890ff;
  background: #f0f7ff;
  color: #1890ff;
}

/* 打卡记录 */
.records-section {
  grid-column: 1 / -1;
}

.filter-group {
  display: flex;
  gap: 12px;
}

.filter-group select {
  padding: 6px 12px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
}

.records-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.record-card {
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 16px;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.record-date {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.record-subject {
  font-size: 13px;
  color: #1890ff;
}

.record-mood {
  font-size: 18px;
}

.record-content {
  margin-bottom: 12px;
}

.record-duration {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.record-note {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

.record-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.pagination button {
  padding: 6px 16px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  font-size: 14px;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination span {
  font-size: 14px;
  color: #666;
}

/* 按钮样式 */
.btn-primary,
.btn-secondary,
.btn-submit,
.btn-text,
.btn-icon {
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.btn-primary {
  background: #1890ff;
  color: white;
  padding: 8px 16px;
}

.btn-primary:hover {
  background: #40a9ff;
}

.btn-secondary {
  background: #f0f0f0;
  color: #333;
  padding: 8px 16px;
}

.btn-secondary:hover {
  background: #e0e0e0;
}

.btn-submit {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px;
  font-size: 15px;
  font-weight: 500;
}

.btn-submit:hover {
  opacity: 0.9;
}

.btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-text {
  background: transparent;
  color: #1890ff;
  padding: 4px 8px;
}

.btn-text:hover {
  background: #f0f7ff;
}

.btn-text.danger {
  color: #ff4d4f;
}

.btn-text.danger:hover {
  background: #fff1f0;
}

.btn-icon {
  background: transparent;
  padding: 4px;
  font-size: 16px;
}

.btn-icon:hover {
  background: #f0f0f0;
}

/* 弹窗 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e8e8e8;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.btn-close {
  background: transparent;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-close:hover {
  color: #333;
}

.modal-form {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}

/* 加载和空状态 */
.loading-box,
.empty-box {
  padding: 40px 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
}

/* 响应式 */
@media (max-width: 1024px) {
  .statistics-section {
    grid-template-columns: repeat(2, 1fr);
  }

  .content-wrapper {
    grid-template-columns: 1fr;
  }

  .records-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .statistics-section {
    grid-template-columns: 1fr;
  }
}
</style>
